<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="164px"
        class="demo-formData"
      >
        <el-row class="mrB8">
          <el-col :span="24">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="typeId"
                  label="事件类型："
                  class="row-padding-bottom"
                >
                  <el-select
                    v-model="formData.typeId"
                    filterable
                    placeholder="请选择"
                    clearable
                    class="sWidth"
                  >
                    <el-option
                      v-for="item in type"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="accidentId"
                  v-bind:label="eventLabel"
                  class="row-padding-bottom"
                >
                  <el-select
                    v-if="!isShowAccident"
                    v-model="formData.accidentId"
                    filterable
                    placeholder="请选择"
                    clearable
                    @change="accidentChange"
                    class="mWidth"
                  >
                    <el-tooltip
                      placement="bottom"
                      v-for="item in accident"
                      :key="item.code"
                      effect="dark"
                    >
                      <div slot="content">
                        <div
                          :style="{ maxWidth: '200px', wordBreak: 'break-all' }"
                        >
                          {{ item.name }}
                        </div>
                      </div>
                      <el-option
                        :label="
                          item.name.length > 24
                            ? item.name.substring(0, 24) + '...'
                            : item.name
                        "
                        :value="item.code"
                      ></el-option>
                    </el-tooltip>
                  </el-select>
                  <el-input
                    v-else
                    v-model="formData.accidentId"
                    placeholder="请输入发生事件"
                    clearable
                    class="mWidth"
                  ></el-input>
                  <el-button
                    v-show="isShowAccident && czUser"
                    type="primary"
                    class="commonBut saveBtn"
                    @click="resetAccident"
                    style="width: 60px"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="industryId"
                  label="行业："
                  class="row-padding-bottom"
                >
                  <el-select
                    v-model="formData.industryId"
                    filterable
                    placeholder="请选择"
                    clearable
                    class="lWidth"
                  >
                    <el-option
                      v-for="item in industryOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="areaId"
                  label="事件发生地区："
                  class="row-padding-bottom"
                >
                  <el-cascader
                    v-model="areaId"
                    :options="areasOptions"
                    ref="myAreaCascader"
                    @change="getAreaId"
                    clearable
                    filterable
                    placeholder="请选择"
                    class="mWidth"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="accidentDate"
                  :label="isCzUser() ? '投诉时间：' : '事件时间：'"
                  class="row-padding-bottom"
                >
                  <el-date-picker
                    v-model="formData.accidentDate"
                    type="date"
                    placeholder="选择日期"
                    clearable
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    class="sWidth"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="projectName"
                  label="项目名称："
                  class="row-padding-bottom projectName"
                >
                  <el-input
                    v-model="formData.projectName"
                    placeholder="请输入项目名称"
                    clearable
                    @input="changeProjectName"
                    class="lWidth"
                  ></el-input>
                  <div v-if="projectNameFlag" class="commonStyle">
                    <template v-for="(item, index) in likeProjects">
                      <p
                        :key="index"
                        @click="clickShowCompany(index)"
                        ref="projectName"
                      >
                        {{ item.projectName || '--' }}
                      </p>
                    </template>
                  </div>
                  <div class="commonStyle" v-if="companyNameFlag">
                    <el-radio-group
                      v-model="companyRadio"
                      @change="changeCompanyRadio"
                    >
                      <template v-for="(item, index) in projectCompanys">
                        <el-radio
                          :key="index"
                          :label="index"
                          :style="{ display: 'block' }"
                          >{{ item.type }}：{{ item.companyName }}</el-radio
                        >
                      </template>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  v-bind:prop="rulesUscc"
                  label="责任主体信用代码："
                  class="row-padding-bottom"
                >
                  <el-input
                    type="text"
                    v-model="formData.uscc"
                    placeholder="请输入统一社会信用代码"
                    @change="checkSetCompnyName"
                    clearable
                    class="mWidth"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  v-bind:prop="rulesCompanyName"
                  label="责任主体企业名称："
                  class="row-padding-bottom"
                >
                  <el-input
                    type="text"
                    v-model="formData.companyName"
                    placeholder="企业名称"
                    v-bind:disabled="isDisabled"
                    class="lWidth"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="involvedRangeId"
                  label="涉及人员："
                  class="row-padding-bottom"
                >
                  <el-select
                    v-model="formData.involvedRangeId"
                    filterable
                    placeholder="请选择"
                    clearable
                    class="sWidth"
                  >
                    <el-option
                      v-for="item in involvedRange"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="accidentRank"
                  label="事件程度："
                  class="row-padding-bottom"
                >
                  <el-select
                    v-model="formData.accidentRank"
                    filterable
                    placeholder="请选择"
                    clearable
                    class="xsWidth"
                  >
                    <el-option
                      v-for="item in disputeRank"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="事件类别：" class="row-padding-bottom">
                  <el-select
                    @change="changeAccidentType"
                    v-model="formData.preciseTypeId"
                    filterable
                    placeholder="请选择"
                    clearable
                    class="xlWidth"
                  >
                    <el-option
                      v-for="item in accidentTypeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col>
            <div class = "infoTitle">
              事件描述
            </div>
          </el-col>
        </el-row> -->
        <el-divider></el-divider>
        <div
          class="secondaryTitle secondaryTitleTheme mrB30"
          style="margin-top: 24px"
        >
          事件描述
        </div>
        <el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="事件情况："
                prop="illustration"
                class="row-padding-bottom"
              >
                <el-input
                  type="textarea"
                  :rows="5"
                  v-model="formData.illustration"
                  id="homeAddress"
                  placeholder="请输入事件原因，200字符以内"
                  clearable
                  :style="{ width: '88%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="row-padding-bottom">
            <el-col :span="24" class="col-position">
              <el-form-item
                label="上传事件资料："
                prop="content"
                class="content"
              >
                <uploadAnnex
                  @getFileList="getFileList"
                  :limitationFactor="limitationFactor"
                  @getFile="getFile"
                  :upLoadFile="upLoadFile"
                />
                <!-- <ul class="upLoadFile">
                  <li v-for="(item,index) of upLoadFile" :key="index">
                    <i class="icon iconfont iconfujian"></i>
                    {{item.name}}
                    <span class="del" @click="delFile(index)">删除</span>
                  </li>
                </ul> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <uploadResult
                :resultList="upLoadFile"
                @callBackResult="getFile"
              />
            </el-col>
          </el-row>
        </el-row>
        <div class="submitBox">
          <el-button
            type="primary"
            class="commonBut saveBtn"
            @click.native="saveForm"
            v-show="isShowSave"
            :loading="isSaveLoading"
            >保存</el-button
          >
          <el-button class="commonBut" @click="goBack">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'

export default {
  name: 'addImportEvent',

  data() {
    var checkArea = (rule, value, callback) => {
      var that = this
      if (!that.formData.areaId) {
        return callback(new Error('发生地区不能为空'))
      } else {
        callback()
      }
    }
    //验证项目名称
    var validateProjectName = (rule, value, callback) => {
      value = value.replace(/\s+/g, '')
      if (value === '') {
        callback(new Error('项目名称不能为空'))
      } else if (!this.formData.projectId) {
        if (this.czUser) {
          callback()
        } else {
          callback(new Error('请选择展示的项目名称'))
        }
      } else {
        callback()
      }
    }
    return {
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 10, //自定义上传文件最大设置
        messageFileSizetip: '最多能上传10M以内的附件', //自定义id解决一个页面包含多个上传附件
        messagetip: '仅支持上传doc,docx,pdf格式文件', //自定义报错提示语
        formatType: 'typeTwo', //自定义上传格式校验类型
        fileId: 'uploadFileInput', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'uploadFileForm', //自定义id解决一个页面包含多个上传附件
        methodTip: '附件为文档或pdf文件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      //时期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },

      titleText: '新增重大事件',
      back: true,
      likeProjects: [],
      selectProject: [],
      projectCompanys: [],
      projectNameFlag: false,
      companyNameFlag: false,
      companyRadio: '',
      defaultMsg: '',
      upLoadFile: [],
      uploadUrl: 'api-f/files/upload',
      oldSrcList: [],
      dialogImageUrl: '',
      srcList: [],
      areaId: '',
      isSaveLoading: false, // 保存loading
      formData: {
        typeId: '', //事件类型（字典）
        accidentId: '', //事件原因（字典）
        accidentDate: '', //2019/11/19--事件发生日期
        address: '', //--事件发生地址
        accidentRank: '', //--事件级别（枚举：01-一般，05-严重，10-重大
        preciseTypeId: '', //事件类别
        preciseTypeName: '', //事件类别名称
        involvedRangeId: '', //--涉案人数区间（字典）
        illustration: '', //--事件说明
        projectName: '', //--项目名称
        projectId: '', //--项目Id
        uscc: '', //--企业USCC
        companyName: '', //--企业名称
        industryId: '', //--行业ID
        areaId: '', //--1502区域Id
        fileList: [],
      },
      type: [], //--事件类型（字典）
      accident: [], //--事件原因（字典）
      involvedRange: [], //--涉案人数区间（字典）
      disputeRank: [], //事件程度
      accidentTypeList: [], //事件类别
      formRules: {
        typeId: [
          { required: true, message: '事件类型不能为空', trigger: 'change' },
        ],
        accidentId: [
          { required: true, message: '事件原因不能为空', trigger: 'change' },
        ],
        areaId: [{ required: true, validator: checkArea, trigger: 'change' }],
        accidentDate: [
          { required: true, message: '事件时间不能为空', trigger: 'change' },
        ],
        industryId: [
          { required: true, message: '行业不能为空', trigger: 'change' },
        ],
        // projectName: [
        //   { required: true, message: "项目名称不能为空", trigger: "change" }
        // ],
        projectName: [
          { required: true, validator: validateProjectName, trigger: 'blur' },
        ],
        uscc: [
          {
            required: true,
            message: '责任主体社会信用代码不能为空',
            trigger: 'change',
          },
        ],
        companyName: [
          {
            required: true,
            message: '责任主体社会信用代码无法匹配到合适的企业',
            trigger: 'change',
          },
        ],
        accidentRank: [
          { required: true, message: '事件程度不能为空', trigger: 'change' },
        ],
        illustration: [
          { required: true, message: '事件情况不能为空', trigger: 'change' },
          { min: 1, max: 200, message: '事件情况不超过200字', trigger: 'blur' },
        ],
        isShowSave: '',
      },
      projectCompany: '', //当前选中
      isShowAccident: false,
      rulesProjectName: 'projectName',
      rulesUscc: 'uscc',
      rulesCompanyName: 'companyName',
      eventLabel: '事件原因：',
      czUser: false,
      isDisabled: true,
    }
  },
  computed: { ...mapState(['areasOptions', 'industryOptions']) },
  watch: {
    'formData.projectId': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.$refs.formData.clearValidate('projectName')
        }
      },
    },
  },
  created: function () {
    //字典表下拉框
    this.getRank() //事件程度
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getSelecData('RIGHTS_TYPE') //事件类型
    this.getSelecData('RIGHTS_ACCIDENT') //事件原因
    this.getSelecData('INVOLVED_RANGE_NAME') //涉案人数区间
    this.getSelecData('ACCIDENT_TYPE') //重大事件类别
    // this.getSelecData("INDUSTRY");//涉案人数区间

    this.companyNameFlag = false
    this.projectNameFlag = false
    this.companyRadio = ''
    this.getIndustry({})
    if (this.isCzUser()) {
      this.rulesProjectName = ''
      this.rulesUscc = ''
      this.rulesCompanyName = ''
      this.eventLabel = '发生事件：'
      this.czUser = true
      this.isDisabled = false
      this.limitationFactor.messagetip = '附件为文档或pdf文件，大小不超过10M'
    }
    console.log(this.isCzUser(), this.eventLabel)
    this.isShowSave =
      this.$store.state.buttonLimitsArr.indexOf('importEvent:add') > -1
  },
  methods: {
    ...mapActions(['getAreas', 'getIndustry']),
    /**
     * @description: 获取上传的附件
     */
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    /**
     * @description: 获取上传的附件
     */
    getFile(val) {
      this.upLoadFile = val
    },
    delFile(index) {
      this.upLoadFile.splice(index, 1)
    },
    successCallBack() {},
    errorCallBack() {},
    changeAccidentType(val) {
      let findOne = this.accidentTypeList.find((v) => v.code === val)
      if (findOne) {
        this.formData.preciseTypeName = findOne.name
      } else {
        this.formData.preciseTypeName = ''
      }
    },
    saveForm() {
      var files = []
      this.upLoadFile.forEach((item) => {
        let pathStr = item.path
        let newName = pathStr.substr(
          pathStr.lastIndexOf('/') + 1,
          pathStr.length - 1
        )
        let fileType = pathStr.substr(
          pathStr.lastIndexOf('.') + 1,
          pathStr.length - 1
        )
        //files.push({id:item.id,originalName:item.name,size:item.size,newName:newName,relativePath:item.path,assicuateName:"T_CS_RIGHTSACCIDENT",assicuateId: "-1",fileType:fileType})

        files.push({
          id: item.id,
          originalName: item.name,
          size: item.size,
          newName: newName,
          relativePath: item.path,
          name: item.name,
          url: item.path,
          assicuateName: 'T_CS_RIGHTSACCIDENT',
          assicuateId: '-1',
          fileType: fileType,
          isImg: item.isImg,
          contentType: item.contentType,
          path: item.path,
          source: item.source,
          createTime: item.createTime,
        })
      })
      this.formData.fileList = JSON.stringify(files)

      this.formData.address = this.$refs['myAreaCascader'].inputValue
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.saveFormInfo()
        } else {
          return false
        }
      })
    },
    saveFormInfo() {
      this.isSaveLoading = true
      this.axios({
        method: 'post',
        url: 'api-r/rightsaccident/expand/add',
        data: this.formData,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.formVisible = false
            this.$router.push('/home/events/importEvent')
            this.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/events/importEvent',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },
    goBack() {
      this.$refs['formData'].resetFields()
      this.$router.push('/home/events/importEvent')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/events/importEvent',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },

    getSelecData(type) {
      var url = 'api-bs/base/dicitem/findbytype'
      this.axios({
        method: 'post',
        url: url,
        data: { type: type },
      })
        .then((res) => {
          if (type == 'RIGHTS_TYPE') {
            this.type = res.data.result
          } else if (type == 'RIGHTS_ACCIDENT') {
            this.accident = res.data.result
          } else if (type == 'INVOLVED_RANGE_NAME') {
            this.involvedRange = res.data.result
          } else if (type == 'INDUSTRY') {
            this.industry = res.data.result
          } else if (type == 'ACCIDENT_TYPE') {
            this.accidentTypeList = res.data.result
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    getRank() {
      this.axios({
        method: 'post',
        url: 'api-r/rightsdispute/expand/getRank',
        data: {},
      })
        .then((response) => {
          this.disputeRank = response.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取事件程度数据失败',
            type: 'error',
          })
        })
    },
    //行业
    getIndustryId() {
      this.formData.industryId =
        this.formData.industryId[this.formData.industryId.length - 1]
    },

    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.formData.areaId = areaId
    },

    changeProjectName() {
      this.likeProjects = []
      this.formData.uscc = ''
      this.formData.companyName = ''
      this.formData.projectId = ''
      // if (this.formData.projectName.length < 3) {
      //   this.formData.projectId = "";
      //   return;
      // }
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/likeproject',
        data: { projectName: this.formData.projectName },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            var listTemps = resp.data.result.results
            if (listTemps.length > 5) {
              for (var i = 0; i < 5; i++) {
                this.likeProjects.push(listTemps[i])
              }
            } else {
              this.likeProjects = listTemps
            }
            if (this.likeProjects.length > 0) {
              this.projectNameFlag = true
              this.companyNameFlag = false
              this.companyRadio = ''
            }
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },
    checkSetCompnyName() {
      //手动去修改已经自动导入的USCC的话，清空主键id
      if (
        this.projectCompany.uscc !== this.formData.uscc &&
        this.formData.uscc !== ''
      ) {
        this.formData.projectCompanyId = ''
      }
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/findcompanyname',
        data: { uscc: this.formData.uscc },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.formData.companyName = resp.data.result
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },

    clickProjectName() {
      this.projectNameFlag = true
      this.companyNameFlag = false
      this.companyRadio = ''
    },
    clickShowCompany(index) {
      this.selectProject = this.likeProjects[index]
      this.formData.projectId = this.selectProject.id
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/findtypebyprojectid',
        data: { projectId: this.selectProject.id },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.projectCompanys = resp.data.result
          }
        })
        .catch((resp) => {})

      this.formData.projectName = this.selectProject.projectName
      this.companyNameFlag = true
      this.projectNameFlag = false
      this.companyRadio = ''
    },
    changeCompanyRadio(label) {
      this.projectCompany = this.projectCompanys[label]
      this.formData.projectCompanyId = this.projectCompany.id
      this.formData.uscc = this.projectCompany.uscc //--企业USCC
      this.formData.companyName = this.projectCompany.companyName //--企业名称
    },
    saveInfo() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
        } else {
        }
      })
    },
    resetInfo() {
      this.$refs['formData'].resetFields()
    },
    accidentChange(value) {
      if (value == '10' && this.czUser) {
        this.isShowAccident = true
        this.formData.accidentId = ''
      }
    },
    resetAccident() {
      this.isShowAccident = false
      this.formData.accidentId = ''
    },
  },
}
</script>
<style scoped lang="less">
// 上传附件
.upLoadBox {
  // display: inline-block;
  position: relative;
  .upLoadDom {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    /deep/ #salaryExcelForm {
      line-height: 36px;
    }
    /deep/ #salaryExcel {
      width: 136px;
      height: 36px;
    }
  }
}

.uploadImgState {
  font-size: 14px;
  color: #999999;
  margin-left: 12px;
}
.uploadImg {
  width: 96px;
  height: 36px;
  color: #009588;
  border: 1px solid #009588;
  line-height: 10px;
}

// 上传文件
.upLoadFile {
  color: #333;
  line-height: 21px;
  li {
    margin-bottom: 10px;
    i {
      color: #999;
      margin: 0 5px 0 15px;
    }
    .del {
      font-size: 14px;
      color: #db0202;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.upLoadDom:hover {
  cursor: pointer;
}

.container {
  .mainCon {
    padding: 24px;
    .labelStyMin {
      padding-left: 0px !important;
      min-width: 130px;
    }
    .labelStyMax {
      padding-left: 0px !important;
      margin-left: 5px;
      min-width: 155px;
    }
    .submitBox {
      margin-top: 20px;
      margin-left: 164px;
    }
    .picStyle {
      width: 116px;
      margin-right: 60px;
      img {
        width: 100%;
      }
    }
    .imgStyle {
      padding-left: 130px;
      li {
        position: relative;
        margin-right: 20px;
        margin-top: 10px;
        i {
          position: absolute;
          right: -6px;
          top: -10px;
          font-size: 20px;
        }
      }
    }
    .projectName {
      .commonStyle {
        z-index: 999;
      }
      ul {
        position: relative;
        background: #fff;
        width: 320px;
        min-height: 80px;
        top: 5px;
        left: 0;
        margin-bottom: 12px;
        padding: 12px;
        z-index: 2000;
        color: #606266;
        line-height: 1.4;
        font-size: 14px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        word-break: break-all;
        transform-origin: center top;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        li {
          padding: 12px 0;
          &:hover {
            background: #f8f8f8;
            cursor: pointer;
          }
        }
      }
      .el-radio {
        padding: 8px 0;
      }
    }
  }
}
form.el-form.demo-formData {
  width: 100%;
  display: inline-block;
  text-align: left;
  .infoTitle {
    font-size: 16px;
    padding: 16px 24px;
    background: #f5f7fb;
    margin-bottom: 24px;
    color: #333;
    font-weight: 700;
  }
  .proInputWidth {
    width: 70%;
  }
}

.saveBtn {
  background-color: #009588;
  border-color: #009588;
  color: #fff;
}
</style>
